<template>
	<view class="container">
		<view class="user-info-chart">
			<!-- <uni-list-chat :avatar-circle="true" :title="user.username" :avatar="head_url" :note="user.email"
				class="uni-list-chat" :time="user.phone">
			</uni-list-chat> -->
			<view class="user-info-head">
				<view class="slot-box">
					<image @click="gotUserEditer" class="slot-image" :src="head_url"></image>
				</view>
				<view class="slot-text">
					<text>{{user.username}}</text>
				</view>
			</view>
		</view>


		<!-- 添加设备成员 -->
		<view class="user-add">
			<view class="are-selelct">
				<view class="are-selelct-top">
					<view class="are-selelct-picker">
						<picker mode="selector" :range="areList" :value="areIndex" @change="selelctAre">
							<view class="picker-show">{{areList[areIndex]}}</view>
						</picker>
					</view>
					
					<view class="are-selelct-icon">
					</view>
				</view>

				<view class="are-selelct-info">
					<text>{{menberNumList[areIndex]}}个成员 &nbsp;|&nbsp; {{dvicesLst[areIndex]}}个设备</text>
				</view>
			</view>
			<view class="user-add-btn">
				<uni-icons type="plusempty" color="#ea5541" size="24"></uni-icons>
			</view>
		</view>
		
		<!-- 轮播图 -->
		<view class="user-swiper">
			<swiper :indicator-dots="true" indicator-active-color="#f00" :autoplay="true" :interval="3000"
				:duration="1000">
				<swiper-item v-for="(item,index) in imgList" :key="index">
					<view class="swiper-item" @click="gotoDetail(item.adLinkUrl)">
						<image :src="item.adImgUrl"></image>
					</view>
					<view class="swiper-item-text">{{item.adDesc}}</view>
				</swiper-item>

			</swiper>
		</view>

		<!-- 设置列表 -->
		<view class="host-set">
			<uni-list class="host-set-list">
				<uni-list-item v-for="(item,index) in userItemList" :key="index" :title="item.text" :to="item.url"
					:show-extra-icon="true" showArrow link="navigateTo" :thumb="item.img" thumb-size="medium" />
				<!-- <uni-list-item title="查询主机" :show-extra-icon="true" showArrow link="navigateTo"
					to="/pages/hostlist/hostlist"
					thumb="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" thumb-size="lg" />
				<uni-list-item class="uni-list-item" title="添加主机" :show-extra-icon="true" showArrow link="navigateTo"
					to="/pages/addhost/addhost"
					thumb="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" thumb-size="lg" />
				<uni-list-item class="uni-list-item" title="修改主机" :show-extra-icon="true" showArrow link="navigateTo"
					to="/pages/updatehost/updatehost"
					thumb="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" thumb-size="lg" /> -->
			</uni-list>
		</view>

	</view>
</template>

<script>
	import api from "../../api/api.js"
	export default {
		data() {
			return {
				head_url: '',
				path: '',
				user: {
					phone: '',
					username: '',
					email: '',
				},
				extraIcon: {
					color: '#5500ff',
					size: '40',
					type: 'gear-filled',

				},
				count: "50",
				userItemList: [{
						img: "/static/users/readme.png",
						text: "说明书",
						url: "/pages/hostlist/hostlist"
					},
					{
						img: "/static/users/hc.png",
						text: "耗材管理",
						url: "/pages/hostlist/hostlist"
					},
					{
						img: "/static/users/info.png",
						text: "消息中心",
						url: "/pages/hostlist/hostlist"
					},
					{
						img: "/static/users/question.png",
						text: "常见问题",
						url: "/pages/hostlist/hostlist"
					},
					{
						img: "/static/users/setting.png",
						text: "更多设置",
						url: "/pages/hostlist/hostlist"
					},
					{
						img: "/static/users/order.png",
						text: "我的订单",
						url: "/pages/hostlist/hostlist"
					},
					{
						img: "/static/users/customService.png",
						text: "小岩客服",
						url: "/pages/hostlist/hostlist"
					},
				],
				areList: [
					"厦门方特",
					"深圳方特",
					"徐州方特"
				],
				areIndex: 0,
				menberNumList: [1, 3, 5],
				dvicesLst: [20, 33, 48],
				imgList: [],
			}
		},
		onLoad() {
			uni.getStorage({
				key: api.base.userInfoHead,
				success: res => {
					// console.log(res.data)
					api.getUserInfo(res.data).then(res => {
						if (res.data === null) {
							uni.navigateTo({
								url: "/pages/login/login"
							})
						} else {
							this.path = res.data.headUrl;
							this.user = res.data;
							this.head_url = api.base.baseUrl + api.base.getUserHeadImage + "?path=" +
								this.path;
							uni.setStorage({
								key: api.base.userInfo,
								data: this.user,
								// success(){
								// 	console.log("保存用户信息成功")
								// }
							})
						}
					})
				},
				complete: data => {
					if (data.data == '') {
						uni.navigateTo({
							url: "/pages/login/login"
						})
					}
				}
			});

			this.getAd();

		},


		onPullDownRefresh() {
			this.getAd();
			uni.stopPullDownRefresh();
		},

		methods: {
			// 选择区域
			selelctAre(e) {
				console.log(e);
				this.areIndex = e.detail.value;
			},
			// 获取轮播图
			getAd() {
				api.getAdItemList().then(res => {
					this.imgList = res.data;
					for (var i = 0; i < this.imgList.length; i++) {
						if (!this.imgList[i].adImgUrl.startsWith('http')) {
							this.imgList[i].adImgUrl = api.base.baseUrl + api.base.getInnerFile +
								"?path=" + this.imgList[i].adImgUrl;
						}
					}
				});
			},

			// 进入商品页面
			gotoDetail(url) {
				let detailUrl = url;
				uni.navigateTo({
					url: "/pages/detail/detail?url=" + detailUrl
				})
			},

			// 进入用户信息编辑页面
			gotUserEditer(){
				uni.navigateTo({
					url: "/pages/userediter/userediter"
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		margin: 0;
		padding: 0;

		// 头部信息
		.user-info-chart {
			height: 150px;
			width: 100%;
			margin-bottom: 20px;
			padding: 10rpx 10px;
			background-color: #ea5541;
			// 组件在小程序端display为inline
			// QQ、抖音小程序文档写有 :host，但实测不生效
			// 百度小程序没有 :host
			/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
			display: block;

			/* #endif */
			.uni-list-chat {
				background-color: aqua;
				border-radius: 20rpx;
			}

			.user-info-head {
				height: 48px;
				border-radius: 8px;
				margin-top: 70px;
				display: flex;
				justify-content: left;
				align-items: center;
				margin-left: 30px;

				.slot-box {
					width: 48px;

					.slot-image {
						width: 48px;
						height: 48px;
						border-radius: 24px;
					}
				}

				.slot-text {
					height: 48px;
					font-size: 16px;
					font-weight: bold;
					color: #fff;
					text-align: center;
					line-height: 48px;
					margin-left: 30rpx;
				}
			}
		}

		// 添加人员和设备部分
		.user-add {
			width: 90%;
			height: 60px;
			margin: 20px auto;
			// border: #ea5541 1px solid;
			background-color: #FFCFCF;
			border-radius: 12px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.are-selelct {
				width: 120px;
				height: 100%;
				// border: green 1px solid;
				margin-left: 10px;
				// margin-top: 10px;
				margin-bottom: 10px;
				
				.are-selelct-top {
					box-sizing: content-box;
					padding-top: 10px;
					position: relative;
					// border: #ea5541 1px solid;
					// margin-bottom: 0;
					opacity: 0.9;
					height: 30px;
					.are-selelct-picker {
						// display: flex;
						width: 100%;
						.picker-show {
							font-size: 16px;
							font-weight: bold;
							color: #000;
						}
					}

					.are-selelct-icon {
						width: 0;
						height: 0;
						// margin: auto;
						position: relative;
						border-top: #ea5541 12px solid;
						border-left: transparent 12px solid;
						border-right: transparent 12px solid;
						border-radius: 6px;
						float: right;
						top: -16px;
						left: -20px;
						z-index: -1;
					}
				}
				.are-selelct-top::after{
					content: '';
					width: 0;
					height: 0;
					display: table;
					clear: both;
				}

				.are-selelct-info {
					// clear: both;
					margin-top: 0;
					font-size: 10px;
					color: #424242;
					// border: #ea5541 1px solid;
					white-space: nowrap;
				}
			}

			.user-add-btn {
				font-size: 30px;
				width: 30px;
				height: 30px;
				border: #ea5541 2px solid;
				border-radius: 15px;
				margin-right: 20px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		// 轮播图
		.user-swiper {
			width: 90%;
			height: 120px;
			margin: 20px auto;
			// border: #ea5541 1px solid;
			border-radius: 12px;

			swiper-item {
				box-sizing: border-box;
				width: 100%;
				height: 120px;
				position: relative;

				image {
					width: 100%;
					height: 120px;
					border-radius: 12px;
				}

				.swiper-item-text {
					position: absolute;
					top: 30%;
					left: 50%;
					transform: translate(-50%, -50%);
					color: #ffffff;
					font-size: 20rpx;
					font-weight: bold;
				}
			}
		}

		// 设置列表
		.host-set {
			padding: 10rpx 10rpx;
			width: 90%;
			margin: 30px auto;
			border: #ea5541 1px solid;
			border-radius: 12px;
			.host-set-list {
				font-size: 14px;
				font-weight: bold;

				.uni-list-item {
					margin-top: 10rpx;
				}
			}
		}
	}

</style>